<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>新用户注册 请输入您的信息</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<main>
    <div class="container myBox" id="app">
        <form class="form">
            <div class="form__cover"></div>
            <div class="form__loader">
                <div class="spinner active">
                    <svg class="spinner__circular" viewBox="25 25 50 50">
                        <circle class="spinner__path" cx="50" cy="50" r="20" fill="none" stroke-width="4"
                                stroke-miterlimit="10"></circle>
                    </svg>
                </div>
            </div>
            <div class="form__content">
                <h1>Authorization</h1>
                <div class="styled-input">
                    <input type="text" class="select-option styled-input__input" name="nickname" v-model="user.name">
                    <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">姓名</span>
                    </div>
                    <div class="styled-input__circle"></div>
                </div>
                <div class="styled-input">
                    <input type="number" class="select-option styled-input__input" v-model="user.age">
                    <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">年龄</span>
                    </div>
                    <div class="styled-input__circle"></div>
                </div>
                <div class="styled-input">
                    <label for="man" class="radio">
                        <span class="radio-bg"></span>
                        <input type="radio" name="sex" id="man" value="1" v-model="user.sex"/> 男
                        <span class="radio-on"></span>
                    </label>
                    <label for="woman" class="radio">
                        <span class="radio-bg"></span>
                        <input type="radio" name="sex" id="woman" value="0" v-model="user.sex"/> 女
                        <span class="radio-on"></span>
                    </label>
                    <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">性别</span>
                    </div>
                    <div class="styled-input__circle"></div>
                </div>
                <div class="styled-input">
                    <select class="select-option" v-model="user.school">
                        <option value="广东经济大学">广东经济大学</option>
                        <option value="广东师范学院">广东师范学院</option>

                    </select>
                    <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">学校</span>
                    </div>
                    <div class="styled-input__circle"></div>
                </div>
                <div class="styled-input">
                    <input class="select-option styled-input__input" v-model="user.number">
                    <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">学号</span>
                    </div>
                    <div class="styled-input__circle"></div>
                </div>
                <div class="styled-input">
                    <select class="select-option" v-model="user.type">
                        <option value="普通员工">普通员工</option>
                        <option value="特殊员工">特殊员工</option>
                    </select>
                    <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">工种</span>
                    </div>
                    <div class="styled-input__circle"></div>
                </div>
                <div class="styled-input">
                    <select class="select-option" v-model="user.major">
                        <option value="计算机网络应用">计算机网络应用</option>
                        <option value="计算机软件工程">计算机软件工程</option>
                    </select>
                    <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">专业</span>
                    </div>
                    <div class="styled-input__circle"></div>
                </div>
                <div class="styled-input">
                    <input id="phone1" class="select-option styled-input__input" type="text"  autocomplete="off"
                           v-model="user.phone"
                    />
                    <div class="styled-input__placeholder"><span class="styled-input__placeholder-text">手机号码</span>
                    </div>
                    <div class="styled-input__circle"></div>
                </div>
                <div class="styled-input">
                    <input id="code1" type="text" autocomplete="off" placeholder="短信验证码" v-model="user.code"/>
                    <input id="btnSendCode1" type="button" class="btn btn-default" value="获取验证码"
                           @click="sendMessage1"/>
                    <div class="styled-input__circle"></div>
                </div>
                <button @click="submit" type="button" class="styled-button">
                        <span class="styled-button__real-text-holder">
                            <span class="styled-button__real-text">Submit</span>
                            <span class="styled-button__moving-block face">
                                <span class="styled-button__text-holder">
                                    <span class="styled-button__text">Submit</span> </span>
                            </span><span class="styled-button__moving-block back">
                                <span class="styled-button__text-holder"> <span
                                        class="styled-button__text">Submit</span> </span> </span> </span></button>
            </div>
        </form>
    </div>
</main>

<script src="js/index.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/vue-2.6.11.js"></script>
<script src="js/axios-0.19.2.min.js"></script>
<script src="js/jquery-cookie-1.4.1.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/scripts.js"></script>
/* 引入需要的 **/
<script src="js/custom.js"></script>
</body>

</html>

<script>
    new Vue({
        el: '#app',
        data: {
            user: {},
            phoneValue:""
        },
        methods: {
            sendMessage1: function () {
                axios.post(`/user/sendsms/${this.user.phone}`).then(function (res) {
                    if (res.data.flag) {

                    }
                });
                var phoneReg =  /^1[3456789]\d{9}$/;//手机号正则 
                curCount1 = count;
                if (!phoneReg.test(this.user.phone)) {
                    alert(" 请输入有效的手机号码");
                    return;
                }
                // 设置button效果，开始计时
                $("#btnSendCode1").attr("disabled", "true");
                $("#btnSendCode1").val(+curCount1 + "秒再获取");
                InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
                //向后台发送处理数据

            },
            submit: function (event) {
                if (this.user != ""||this.user.code!='') {
                    axios.post(`/user/register/`, this.user).then(function (res) {
                        if (res.data.flag) {
                            alert("注册成功")
                        } else {
                            alert("信息有误")
                        }
                    })
                }
            }
        }
    })
</script>